<template>
  <div class="table">
    <p><span>待审批请求</span><span>更多</span></p>
    <el-table :data="tableData" style="width: 100%">
    <el-table-column fixed prop="date" label="摘要" width="150" />
    <el-table-column prop="name" label="类型" width="120" />
    <el-table-column prop="state" label="部门" width="120" />
    <el-table-column prop="city" label="员工" width="120" />
    <el-table-column prop="address" label="滞留时间" width="600" />
    <el-table-column fixed="right" label="操作" width="120">
      <template #default="scope">
        <el-button link type="primary" size="small"  @click.prevent="handleyes(scope.$index)"
          >同意</el-button
        >
        <el-button link type="primary" size="small" @click.prevent="handleno(scope.$index)">拒绝</el-button>
      </template>
    </el-table-column>
  </el-table>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const handleyes = (i) => {
  // console.log(tableData[i].city)
  const b=confirm(`你将要同意${tableData.value[i].city}的${tableData.value[i].date}请求`)
if(b){
  tableData.value.splice(i, 1)
}
}

const handleno = (i) => {
  const b=confirm(`你将要拒绝${tableData.value[i].city}的${tableData.value[i].date}请求`)
if(b){
  tableData.value.splice(i, 1)
}
}

const tableData = ref([
  {
    date: '外出',
    name: '公出',
    state: '设计部',
    city: '谢岚',
    address: '2小时前',
    tag: 'Home',
  },
  {
    date: '补签',
    name: '非正常考勤',
    state: '设计部',
    city: '曲歌',
    address: '10小时前',
    tag: 'Office',
  },
  {
    date: '补签',
    name: '非正常考勤',
    state: '后勤部',
    city: '张青',
    address: '12小时前',

    tag: 'Home',
  },
  {
    date: '外出',
    name: '公出',
    state: '设计部',
    city: '谢岚',
    address: '2小时前',
    tag: 'Home',
  },
  {
    date: '补签',
    name: '非正常考勤',
    state: '设计部',
    city: '曲歌',
    address: '10小时前',
    tag: 'Office',
  },
  {
    date: '补签',
    name: '非正常考勤',
    state: '后勤部',
    city: '张青',
    address: '12小时前',

    tag: 'Home',
  },
  {
    date: '外出',
    name: '公出',
    state: '设计部',
    city: '谢岚',
    address: '2小时前',
    tag: 'Home',
  },
  {
    date: '补签',
    name: '非正常考勤',
    state: '设计部',
    city: '曲歌',
    address: '10小时前',
    tag: 'Office',
  },
  {
    date: '补签',
    name: '非正常考勤',
    state: '后勤部',
    city: '张青',
    address: '12小时前',

    tag: 'Home',
  },
])
</script>

<style scoped lang="less">
.table{
    // margin-top: 15px;
    background: #fff;
    font-size: 12px;
    float: left;
    width: calc(73% - 20px);
    padding-right: 20px;
    height: 190px;
    overflow: hidden;
}
:deep .el-table--fit el-table--scrollable-x el-table--enable-row-transition el-table el-table--layout-fixed is-scrolling-left{
    width: 100%;
    height: 100%;
    margin-top: 20px;
}
.table p{
    line-height: 20px;
    font-size: 12px;
    color: #797777;
    margin-bottom: 20px;
}
.table p span:nth-child(1){
    float: left;
    font-size: 14px;
}
.table p span:nth-child(2){
    float: right;
}
</style>
